<template>
  <div class="daily-sales-carousel swiper">
    <div class="swiper-wrapper" style="">
      <div class="swiper-slide" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-6.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter-2">
                <div class="product-counter-item day2">
                  157<span>days</span>
                </div>
                <div class="product-counter-item hour2">23<span>hrs</span></div>
                <div class="product-counter-item min2">6<span>mins</span></div>
                <div class="product-counter-item sec2">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Mini Table</a>
              </h3>
              <p class="product-id">R24HER324</p>
              <div class="product-price">$120.0 <del>$150.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-10.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter">
                <div class="product-counter-item day1">
                  127<span>days</span>
                </div>
                <div class="product-counter-item hour1">22<span>hrs</span></div>
                <div class="product-counter-item min1">6<span>mins</span></div>
                <div class="product-counter-item sec1">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Park Sitting Chair</a>
              </h3>
              <p class="product-id">R23HY45</p>
              <div class="product-price">$150.0 <del>$170.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-8.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter-2">
                <div class="product-counter-item day2">
                  157<span>days</span>
                </div>
                <div class="product-counter-item hour2">23<span>hrs</span></div>
                <div class="product-counter-item min2">6<span>mins</span></div>
                <div class="product-counter-item sec2">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Simple Sitting Chair</a>
              </h3>
              <p class="product-id">TN232EN</p>
              <div class="product-price">$250.0 <del>$350.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-7.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter-1">
                <div class="product-counter-item day1">
                  127<span>days</span>
                </div>
                <div class="product-counter-item hour1">22<span>hrs</span></div>
                <div class="product-counter-item min1">6<span>mins</span></div>
                <div class="product-counter-item sec1">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Plastic Sitting Chair</a>
              </h3>
              <p class="product-id">N23HN456</p>
              <div class="product-price">$20.0 <del>$33.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-6.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter-2">
                <div class="product-counter-item day2">
                  157<span>days</span>
                </div>
                <div class="product-counter-item hour2">23<span>hrs</span></div>
                <div class="product-counter-item min2">6<span>mins</span></div>
                <div class="product-counter-item sec2">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Mini Table</a>
              </h3>
              <p class="product-id">R24HER324</p>
              <div class="product-price">$120.0 <del>$150.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-10.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter">
                <div class="product-counter-item day1">
                  127<span>days</span>
                </div>
                <div class="product-counter-item hour1">22<span>hrs</span></div>
                <div class="product-counter-item min1">6<span>mins</span></div>
                <div class="product-counter-item sec1">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Park Sitting Chair</a>
              </h3>
              <p class="product-id">R23HY45</p>
              <div class="product-price">$150.0 <del>$170.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide active" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-8.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter-2">
                <div class="product-counter-item day2">
                  157<span>days</span>
                </div>
                <div class="product-counter-item hour2">23<span>hrs</span></div>
                <div class="product-counter-item min2">6<span>mins</span></div>
                <div class="product-counter-item sec2">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Simple Sitting Chair</a>
              </h3>
              <p class="product-id">TN232EN</p>
              <div class="product-price">$250.0 <del>$350.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide active" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-7.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter-1">
                <div class="product-counter-item day1">
                  127<span>days</span>
                </div>
                <div class="product-counter-item hour1">22<span>hrs</span></div>
                <div class="product-counter-item min1">6<span>mins</span></div>
                <div class="product-counter-item sec1">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Plastic Sitting Chair</a>
              </h3>
              <p class="product-id">N23HN456</p>
              <div class="product-price">$20.0 <del>$33.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide active" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-6.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter-2">
                <div class="product-counter-item day2">
                  157<span>days</span>
                </div>
                <div class="product-counter-item hour2">23<span>hrs</span></div>
                <div class="product-counter-item min2">6<span>mins</span></div>
                <div class="product-counter-item sec2">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Mini Table</a>
              </h3>
              <p class="product-id">R24HER324</p>
              <div class="product-price">$120.0 <del>$150.0</del></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide" style="">
        <div class="item">
          <div class="product-card-flat">
            <div class="product-card-thumb">
              <a :href="'/shop/shop-single'">
                <img
                  :src="require('assets/images/products/product-10.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-shopping-cart"></i>
                    <span>Add Cart</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;" class="quick-view-trigger">
                    <i class="flaticon-visibility"></i>
                    <span>Quick View</span>
                  </a>
                </li>
                <li>
                  <a href="javascropt:;">
                    <i class="flaticon-like"></i>
                    <span>Add Wishlist</span>
                  </a>
                </li>
              </ul>
              <div class="product-status">New</div>
              <div class="product-counter daily-counter">
                <div class="product-counter-item day1">
                  127<span>days</span>
                </div>
                <div class="product-counter-item hour1">22<span>hrs</span></div>
                <div class="product-counter-item min1">6<span>mins</span></div>
                <div class="product-counter-item sec1">55<span>sec</span></div>
              </div>
            </div>
            <div class="product-card-content">
              <h3>
                <a :href="'/shop/shop-single'">Park Sitting Chair</a>
              </h3>
              <p class="product-id">R23HY45</p>
              <div class="product-price">$150.0 <del>$170.0</del></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-navigation disabled">
      <button type="button" class="swiper-button-prev">
        <i class="flaticon-back"></i>
      </button>
      <button type="button" class="swiper-button-next">
        <i class="flaticon-next"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import Swiper, { Navigation, Pagination, Scrollbar, Controller } from "swiper";
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {
  var dailySlesCarousel = new Swiper(".daily-sales-carousel", {
    modules: [Navigation, Pagination, Controller],
    slidesPerView: 3,
    spaceBetween: 10,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },

    on: {
      click: function (swiper, event) {},
    },
  });
});

const addCart = (product, quantity) => {
  var newProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addCart(newProduct);
};

const addWish = (product, quantity) => {
  var newProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addWish(newProduct);
};
</script>
<style lang="scss" scoped></style>
